<template>
<div class="carscontain">
  <div class="carscontain_t">
    <span style="margin: 10px 50px">所有学员</span><span style="margin: 10px 50px">我的学员</span>
  </div>
  <div class="carscard">
    <div class="ooo">
      <div class="carsli" v-for="(item,index) in studentList" :key="index">
        <div style="height: 100px;width: 100px;display: flex;align-items: center;justify-content: center;border-radius: 16%;margin: 2px">
          <el-avatar :size="100" shape="square" :src=item.img >
            <img src="https://img0.baidu.com/it/u=1799451268,1283400252&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300" alt=""/>
          </el-avatar>
        </div>
        <div class="carcontain">
          <div>姓名：<span>{{item.name}}</span></div>
          <div>年龄：<span>{{item.age}}</span></div>
          <div>学员号：
            <span style="color: #4da9ff">{{item.userId}}</span>
            <div style="float: right">所属教练：<span style="color: #4da9ff">{{ item.coachId }}</span></div>
          </div>
          <div>手机：<span>{{item.mobile}}</span></div>
          <div>注册日期：<span>{{item.date}}</span></div>

        </div>
        <div style="height: 100px;display: flex;align-items: center">
          <button class="xqbut1" @click="xqquery('1',index)">详情</button>
        </div>
      </div>
      <div style="position: absolute;bottom: 0">
        <el-pagination
            v-model:currentPage="currentPage1"
            :page-size="pagesize"
            background
            layout="total, prev, pager, next"
            :total="stutotal"
            @current-change="handleCurrentChange"
            v-if="pagedisplay"
        />
      </div>
    </div>
    <div class="iii" >
      <div class="carsli1" v-for="(item,index) in mystulist" :key="index">
        <div style="height: 100px;width: 100px;display: flex;align-items: center;justify-content: center;border-radius: 16%;margin: 2px">
          <el-avatar :size="100" shape="square" :src=item.img >
            <img src="https://img0.baidu.com/it/u=1799451268,1283400252&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300" alt=""/>
          </el-avatar>
        </div>
        <div class="carcontain">
          <div>姓名：<span>{{item.name}}</span> <div style="float: right">年龄：<span>{{item.age}}</span></div></div>
          <div>手机：<span>{{item.mobile}}</span></div>
          <div>学员号：
            <span style="color: #4da9ff">{{item.userId}}</span>
            <div style="float: right">我的学员</div>
          </div>
          <div>练车预约（时间段,期限）：
            <el-popover placement="top" :width="400" trigger="hover">
              <template #reference>
                <el-button class="car_con_div">预约详情</el-button>
              </template>
              <div class="car_con_div" v-show="item.intervalTime">时间段：<span>{{item.intervalTime}}</span>，期限：<span>{{item.date}}</span></div>
              <div class="car_con_div" v-show="!item.intervalTime"><span>无任何预约</span></div>
            </el-popover>
          </div>
          <div>考试预约（地点，时间）：
            <el-popover placement="top" :width="400" trigger="hover">
              <template #reference>
                <el-button class="car_con_div">预约详情</el-button>
              </template>
              <div class="car_con_div" v-show="item.examPlace">地点：<span>{{item.examPlace}}</span>，时间：<span>{{item.examDate}}</span></div>
              <div class="car_con_div" v-show="!item.examPlace"><span>无任何预约</span></div>
            </el-popover>
          </div>
        </div>
        <div style="height: 100px;display: flex;align-items: center">
          <button class="xqbut1" @click="xqquery('2',index)">详情</button>
        </div>
      </div>
      <div style="position: absolute;bottom: 0">
        <el-pagination
            v-model:currentPage="currentPage2"
            :page-size="pagesize2"
            background
            layout="total, prev, pager, next"
            :total="stutotal2"
            @current-change="handleCurrentChange2"
            v-if="pagedisplay2"
        />
      </div>
    </div>
  </div>
</div>
</template>

<script setup>
import {ref} from "vue";
import {getAllStudent, getStuByCId, getStudentById} from "@/api/student";
import {useStore} from "vuex";
const store = useStore()

const currentPage1 = ref(1)
const pagesize = ref(5)
const stutotal = ref(0)
const pagedisplay = ref(true)

const currentPage2 = ref(1)
const pagesize2 = ref(5)
const stutotal2 = ref(0)
const pagedisplay2 = ref(true)

const studentList = ref({})
const mystulist = ref({})


//初始化数据
const CSH = async () =>{
  pagedisplay.value = true
  await getAllStudent({pageNum:currentPage1.value,pageSize:pagesize.value}).then(res=>{
    if (res.code === 20041){
      studentList.value = res.data.list
      stutotal.value = res.data.total
    }else {
      console.log(res.data)
    }
  })
}
CSH()
const MYS = async () =>{
  await getStuByCId({pageNum:currentPage2.value,pageSize:pagesize2.value,id:store.getters.Id}).then(res=>{
    if (res.code === 20041){
      mystulist.value = res.data.list
      stutotal2.value = res.data.total
      console.log(mystulist.value)
    }else {
      console.log(res.data)
    }
  })
}
MYS()

//分页，页码改变
const handleCurrentChange = async () =>{
  await CSH()
  console.log(currentPage1.value)
}
const handleCurrentChange2 = async () =>{
  await MYS()
  console.log(currentPage2.value)
}

//我的全部学员
const myallstu = async () =>{
  pagedisplay.value = false
  await getAllStudent().then(res=>{
    if (res.code === 20041){
      studentList.value = res.data
      stutotal.value = res.data.length
    }else {
      console.log(res.data)
    }
  })
}
//详情
const xqquery = (select,index) =>{
  let carsli = document.querySelectorAll('.carsli')
  let carsli1 = document.querySelectorAll('.carsli1')
  if (select === '1'){
    carsli.forEach(item=>{
      item.classList.remove('active')
    })
    carsli[index].classList.add('active')
  }else {
    carsli1.forEach(item=>{
      item.classList.remove('active')
    })
    carsli1[index].classList.add('active')
  }
}
</script>

<style scoped>
/**{*/
/*  border: 1px solid blue;*/
/*}*/
.carscontain{
  flex: 1;
  margin: 0;
  padding: 10px 10%;
  height: auto;
  overflow: scroll;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  background-color: white;
}
.carscontain_t{
  min-width: 860px;
  padding: 10px;
  font-weight: 600;
  font-family: 华文仿宋, serif;
  text-align: center;
  font-size: 27px;
  border: 1px solid #e4e7ed;
  border-top: none;
  box-shadow: 0 0 12px rgba(173,173,173,0.12);
}
.carscard{
  flex: 1;
  display: flex;
  min-width: 860px;
  box-sizing: border-box;
  border: 1px solid #e4e7ed;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
}
.iii,
.ooo{
  position: relative;
  flex: 1;
}
.carsli1,
.carsli{
  flex: 0.15;
  height: 60px;
  box-sizing: border-box;
  border-radius: 8px;
  margin: 5px;
  display: flex;
  overflow: hidden;
  align-items: center;
  border: 1px solid #e4e7ed;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
  transition: height 0.2s ease-in-out;
}
.carcontain{
  height: 200px;
  flex: 1;
  font-weight: 600;
  font-size: 17px;
  font-family: 华文仿宋, serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 38px;
  /*border: 1px solid red;*/
}
.carcontain span{
  color: #4da9ff;
}
.carsli1.active,
.carsli.active{
  height: 210px;
}
.carsli1>div>span,
.carsli>div>span{
  color: white;
  /*background-color: #63b4ff;*/
  padding: 1px 2px;
}
.car_con_div{
  text-align: center;
  font-weight: 600;
  font-size: 17px;
  font-family: 华文仿宋, serif;
}
.car_con_div>span{
  color: #4da9ff;
}

/* From uiverse.io by @mrhyddenn */
.xqbut1 {
  margin: 10px;
  max-width: 100px;
  padding: 10px 20px;
  border-radius: 7px;
  border: 1px solid #7d92ff;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 2px;
  background: transparent;
  color: #7d92ff;
  overflow: hidden;
  transition: all 0.2s ease-in;
}

.xqbut1:hover {
  background: #7d92ff;
  color: white;
  transition: all 0.2s ease-out;
}

.xqbut1:active {
  background: #4d6eff;
}
</style>